<template>
  <div class="app-container">
    
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column align="center" label='ID' width="95">
        <template scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="指派任务">
        <template scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>

      <el-table-column label="执行人" width="110">
        <template scope="scope">
          <span>{{scope.row.author}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="重要性">
        <template scope="scope">
           <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
        </template>
      </el-table-column>
      <el-table-column label="进度" width="105" align="center">
        <template scope="scope">
          {{scope.row.jd}}%
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="开始时间" width="200">
        <template scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.start_time}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="结束时间" width="200">
        <template scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.end_time}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/article';
export default {
  data () {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        importance: undefined,
        page: 1,
        limit: 20
      }
    }
  },
  created () {
    this.fetchData();
  },
  methods: {
    fetchData () {
      this.listLoading = true;
      getList(this.listQuery).then(response => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
        console.log(this.total)
      })
    },
    handleSizeChange (val) {
      this.listQuery.limit = val;
      this.fetchData();
    },
    handleCurrentChange (val) {
      this.listQuery.page = val;
      this.fetchData();
    }
  }
};
</script>
